
import React,{ Fragment,useEffect,useState} from 'react';
import {Layout,Input,Button,Table,Modal} from 'antd'
import axios from 'axios';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const {confirm}=Modal
const { Search } = Input;
const {Content} =Layout;


function Clientz(props) {
    const onSearch=(value)=>{
        console.log(value);
    }
    function showConfirm(e){
        confirm({
            title:'确定要删除用户吗',
            icon:<ExclamationCircleOutlined />,
            Content: '该用户等级较高，请谨慎操作',
            okType:'danger',
            onOk(){
                console.log("id" ,e.target.id);
                axios.post("/api/delete",{id:e.target.id,...pagination}).then((res)=>{
                    setClientList(res.data.list);
                    setPagination({...pagination,total:res.data.total})
                })
            },
            onChange(){
                console.log('Cancel')
            },
        });
    }
    const columns =[
        {
            title:'姓名',
            dataIndex:'name',
            width:"10%"
        },
        {
            title:'手机号',
            dataIndex:'phone',
        },
        {
            title:'邮箱',
            dataIndex:'email',
            ellipsis:true,
        },
        {
            title:'地址',
            dataIndex:'address',
            ellipsis:true,
        },
        {
            title:'负责人',
            dataIndex:'leader',
            window:"10%"
        },
        {
            title:'呼入时间',
            dataIndex:'callintime',
            ellipsis:true,
        },
        {
            title:'操作',
            render:(text,record)=>{
                console.log("text",text,'record',record)
                return(
                <>
                <span className="iconfont icon-xiugai"></span>
                <spam className="iconfont icon-shanchu" id={record.id} onClick={showConfirm}></spam>
                </>
            )}
        } 
    ];
    var [clientList,setClientList]=useState([]);
    var [loading,setLoading]=useState(false);
    var [pagination,setPagination]=useState({current:1,pageSize:5});
    useEffect(()=>{
        setLoading(true);
        axios.get('/api/client',{params:pagination}).then((res)=>{
           setLoading(false);
            setClientList(res.data.list);
            setPagination({...pagination,total:res.data.total})
        })
    },[])
    const handleChange=(newpagination)=>{
       setLoading(true);
        axios.get('/api/client',{params:newpagination}).then((res)=>{
           setLoading(false);
            setClientList(res.data.list);
            setPagination({...newpagination,total:res.data.total})
        })
    }
    var [selectedRowKeys,setSelectedRowKeys]=useState([]);
    const onSelectChange=(selectedRowKeys)=>{
        console.log(selectedRowKeys);
        setSelectedRowKeys(selectedRowKeys);
    }
    const rowSelection = {
        selectedRowKeys,
        onChange:onSelectChange,
    };
    
    return (
        <div className="clientz">
            <Layout style={{padding:'0 24px 24px'}}>
            <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                    }}
                >
                    <div className="title">客户管理</div>
                    <Search  allowClear placeholder="输入客户姓名" onSearch={onSearch} enterButton  style={{width:300}}/>
                    <div className="btns">
                    <Button type={selectedRowKeys.length>0 ?'primary':'' } disabled={selectedRowKeys.length==0}>建设人工外呼</Button>
                    <Button type={selectedRowKeys.length>0 ?'primary':'' } disabled={selectedRowKeys.length==0}>写入机器外呼</Button>
                    <Button type={selectedRowKeys.length>0 ?'primary':'' } disabled={selectedRowKeys.length==0}>发送消息</Button>
                    <Button type={selectedRowKeys.length>0 ?'primary':'' } disabled={selectedRowKeys.length==0}>设定负责人</Button>
                    <Button type={selectedRowKeys.length>0 ?'primary':'' } disabled={selectedRowKeys.length==0}> <span className="iconfont icon-shanchu"></span> </Button>
                    <Button className="export" type="primary">导出客户</Button>
                    <Button className="import" type="primary">导入客户</Button>

                    </div>

                    
                    <Table rowSelection={rowSelection} columns={columns} dataSource={clientList}  pagination={pagination} onChange={handleChange} loading={loading}/>

                </Content>
            </Layout>
        </div>
    );
}

export default Clientz;